<%--
  Created by IntelliJ IDEA.
  User: w1057229265
  Date: 2021/6/19
  Time: 16:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>绿色清爽响应式登录页面模板</title>
  <script src="static/js/jquery.min.js"></script>
  <script type="text/javascript" src="../static/plugins/jquery-easyui-1.9.15/jquery.min.js"></script>
  <style>
    * { margin: 0; padding: 0; }
    html { height: 100%; }
    body { width:100%; height: 100%; background: #fff url(static/images/backgroud.png) 50% 50% no-repeat; background-size: cover;}
    .dowebok { position: absolute; left: 50%; top: 50%; width: 430px; height: 550px; margin: -300px 0 0 -215px; border: 1px solid #fff; border-radius: 20px; overflow: hidden;}
    .logo { width: 104px; height: 104px; margin: 50px auto 80px; background: url(static/images/login.png) 0 0 no-repeat; }
    .form-item { position: relative; width: 360px; margin: 0 auto; padding-bottom: 30px;}
    .form-item input { width: 288px; height: 48px; padding-left: 70px; border: 1px solid #fff; border-radius: 25px; font-size: 18px; color: #fff; background-color: transparent; outline: none;}
    .form-item button { width: 360px; height: 50px; border: 0; border-radius: 25px; font-size: 18px; color: #1f6f4a; outline: none; cursor: pointer; background-color: #fff; }
    #username { background: url(static/login/img/logName.png) 20px 14px no-repeat; }
    #password { background: url(static/images/password.png) 23px 11px no-repeat; }
    .tip { display: none; position: absolute; left: 20px; top: 52px; font-size: 14px; color: #f50; }
    .reg-bar { width: 360px; margin: 20px auto 0; font-size: 14px; overflow: hidden;}
    .reg-bar a { color: #fff; text-decoration: none; }
    .reg-bar a:hover { text-decoration: underline; }
    .reg-bar .reg { float: left; }
    .reg-bar .forget { float: right; }
    .dowebok ::-webkit-input-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}
    .dowebok :-moz-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}
    .dowebok ::-moz-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}
    .dowebok :-ms-input-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}

    @media screen and (max-width: 500px) {
      * { box-sizing: border-box; }
      .dowebok { position: static; width: auto; height: auto; margin: 0 30px; border: 0; border-radius: 0; }
      .logo { margin: 50px auto; }
      .form-item { width: auto; }
      .form-item input, .form-item button, .reg-bar { width: 100%; }
    }
  </style>
  <script type="text/javascript" >
    $(function () {
      $("#bn").click(function () {
        var username=$("#username").val();
        var password=$("#password").val();
        var validcode=$("#validcode").val();
        $.ajax({
          type: "POST",
          url: "ServletLogin?action=login",
          data: {username: username, password: password,validcode:validcode},
          success: function (ret) {
            let result = eval("("+ret+")");
            if (result.code =="201"){
              location.href="userid.jsp"}
            else {
              alert(result.msg)
            }
          }
        })
      })
    });
    $('#password').focus(function(){
      $(this).css('border-color','red');
    });
    $('#password').blur(function(){
      alert($(this).val());
    });
  </script>
</head>
<body>
<!-- 登录body -->
<form id="form"  method="post" action="ServletLogin">
  <div class="logDiv">
    <div class="logGet">
      <!-- 头部提示信息 -->
      <div class="dowebok">
        <div class="logo"></div>
      <!-- 输入框 -->
      <div class="form-item">
        <input  id="username" name="username" type="text"
                                                                      placeholder="输入用户名"/>
      </div>
      <div class="form-item">
  <input id="password" name="password" type="password"
                                                                    placeholder="输入用户密码"/>
      </div>
      <div class="form-item">
        <input id="validcode" style="width: 150px" name="validcode" type="text"
               placeholder="验证码"/>
        <img src="ServletValidCode" onclick="this.src='ServletValidCode?r='+Math.random()">
      </div>
      <div class="form-item">
        <button id="bn" type="button"> 登 录</button>
      </div>
    </div>
  </div>
  </div>
</form>

</body>
</html>

